<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="icon" href="img/tyust.png"/>
		<title>用户登录</title>
		<style>
			body {
				background-color: blue;
			}
			
			.longin {
				/*div区域的颜色*/
				background-color: white;
				/*让div在网页中居中*/
				margin: 0 auto;
				
				/*设置DIV1区域的顶端外部边距*/
				margin-top: 100px;
				
				/*设置DIV区域的大小*/
				width: 550px;
				height: 530px;
				
				/**调整顶部内边距**/
				padding-top: 30px;
				
				/**让DIV内部的东西全都居中**/
				text-align: center;
			}
			
			/*登录界面的输入框*/
			.longinInput {
				width: 426px;
				height: 55px;
				
				/**边框圆角**/
				border-radius: 5px;
				
				/**边框样式**/
				border: 1px solid mediumblue;
				/**变框外边距**/
				margin-bottom: 20px;
				
				/**文本框左侧内边距**/
				padding-left: 30px;
				
				/**文本框背景透明**/
				background-color: transparent;
				
				/****/
				margin-left: -25px
				
			}
			
			/**按钮**/
			.longinBtn {
				width: 450px;
				height: 55px;
				background-color: #ff6B4D;
				border-radius: 5px;
				
				/*去掉按钮边框*/
				border: none;
			}
			
			/**第三方登录**/
			.thirdLog {
				margin-top: 30px;
			}
			
			/**第三方登录按钮**/
			.thirdButon{
				/**按钮透明**/
				background-color: transparent;
				
				/**边框无**/
				border: none;
			}
		</style>
	</head>
	<body>
		<div class="longin">
			
			<!--放置Logo的div-->
			<div style="text-align: center;" >
				<img src="img/tyustlogo.png" width="350px"/>
			</div>
			
			<h2 style="text-align: center;">毕业设计管理系统</h2> <!--设置居中的方法  style="text-align: center;"-->
			
			<div>
				<img src="img/user.png"><input class="longinInput" type="text" placeholder="请输入用户名" />
				<br />
				<img src="img/password.png"><input class="longinInput" type="password" placeholder="请输入密码"/>
				<br />
				<button class="longinBtn">登录</button>
			</div>
			
			<!--方第三方登录-->
			<div class="thirdLog">
				<a href="http://www.baidu.com">
					<button class="thirdButon" ><img src="img/qq.png"/></button>
				</a>
				
				<button class="thirdButon"><img src="img/weibo.png"/></button>
				<button class="thirdButon"><img src="img/weixin.png"/></button>
			</div>
			
			<!--开发者信息-->
			<div style="font-size: 12px; line-height: 15px;">
				开发者：刘龙兵<br />
				作者信息：太原科技大学物联网工程
			</div>
		</div>
		
	</body>
</html>